<template>
    <el-form :model="form"
             :rules="rules"
             ref="form"
             label-width="100px"
             class="panel-actionOrder">
        <div class="panel-actionOrder-group">相关人员信息</div>
        <el-form-item v-for="(val, key) in baseLabel"
                      :key="key"
                      :label="val"
                      :prop="key">
            <el-input v-model="form[key]" :placeholder="`请输入${val}`"></el-input>
        </el-form-item>
        <div class="panel-actionOrder-group">项目信息</div>
        <el-form-item v-for="(val, key) in otherLabel"
                      :key="key"
                      :label="val"
                      :prop="key">
            <el-input v-model="form[key]" :placeholder="`请输入${val}`"></el-input>
        </el-form-item>
        <el-form-item class="panel-actionOrder-btn">
            <el-button type="success"
                       class="btn margin"
                       size="small"
                       :disabled="disabled"
                       @click="submitForm('form')">保存</el-button>
            <el-button class="btn"
                       type="danger"
                       size="small"
                       :disabled="disabled"
                       @click="resetForm('form')">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import _ from 'lodash'

export default {
    name: 'actionOrder',
    data() {
        return {
            baseLabel: {
                customer: '客户',
                link_man: '联系人',
                link_phone: '联系方式',
                business_from: '业务来源',
                address: '客户地址',
                business_man: '业务员',
                merchandiser: '跟单员',
                imprest: '预付款',
                account: '收款账户'
            },
            otherLabel: {
                project: '项目类型',
                material: '材质',
                size: '宽高',
                spec_name: '规格',
                count: '数量',
                cub_num: '平方数',
                amount: '单价',
                order_time: '订货日期',
                output_time: '交货日期',
                remark: '备注'
            },
            form: {
                customer: '',
                link_man: '',
                link_phone: '',
                business_from: '',
                business_man: '',
                merchandiser: '',
                imprest: '',
                account: '',
                project: '',
                material: '',
                size: '',
                spec_name: '',
                count: '',
                cub_num: '',
                amount: '',
                order_time: '',
                output_time: '',
                remark: ''
            },
            formCache: null,
            rules: {
                link_man: [
                    { required: true, message: '请输入联系人', trigger: 'blur' }
                ],
                link_phone: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        disabled() {
            const { id } = this.$route.query
            if(id) {
                if(this.formCache && this.formCache.is_mine) {
                    const formStr = JSON.stringify(this.form)
                    const formCacheStr = JSON.stringify(this.formCache)
                    return formStr === formCacheStr
                } else {
                    return true
                }
            }
            return this.form.link_man === '' || this.form.link_phone === ''
        }
    },
    methods: {
        hide() {
            const param = ['action']
            const { id } = this.$route.query
            if(id) {
                param.push('id')
            }
            const query = _.omit(this.$route.query, ['action'])
            this.$router.push({ query })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const params = {}
                    const form = this.form
                    Object.keys(form).forEach(key => {
                        if(form[key]) {
                            params[key] = form[key]
                        }
                    })
                    this.$store.dispatch('addOrder', params)
                    this.hide()
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
            this.hide()
        }
    },
    created() {
        const { id } = this.$route.query
        if(id) {
            this.$http.post('/business/info', { id }).then(data => {
                this.form = data.data.data
                this.formCache = Object.assign({}, data.data.data)
            })
        }
    }
}
</script>
<style lang='less'>
.panel-actionOrder {
    padding: 20px;
    &-group {
        color: #aaa;
        font-size: 12px;
        padding: 15px;
    }
    &-btn {
        text-align: center;
        padding-top: 20px;
        .margin {
            margin-right: 80px;
        }
    }
}
</style>
